<template>
	<view class="detail" v-if="showpage">
		<uni-popup ref="popupsuccess" type="message">
			<uni-popup-message type="success" message="刷新成功" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 		<view class="detail-title">
			{{fromData.title}}
		</view> -->
		<view class="detail-header">
			<view class="detail-header__logo">
				<image :src="fromData.wxuser.avatar_text ? fromData.wxuser.avatar_text : '/static/user.png'"
					mode="aspectFill"></image>
			</view>
			<view class="detail-header__content">
				<view class="detail-header__content-title">
					{{fromData.wxuser.nickname}}
				</view>
				<view class="detail-header__content-info">
					<!-- 
					<text>{{fromData.viewcount}} 浏览</text>
					<text>{{fromData.zannum}} 赞</text> -->
					<text>{{fromData.createtime}}</text>
				</view>
			</view>
			<button v-if="userinfo && (fromData.wxuser.id != userinfo.id)" class="detail-header__button" type="default"
				@click="follow(fromData.wxuser.id)">
				<!-- {{fromData.is_wxuser_like ? '取消关注' : '关注'}} -->
				关注
			</button>
		</view>
		<view class="detail-content">
			<view class="detail-html">
				<u-parse :content="fromData.title" :noData="noData"></u-parse>
			</view>
			<view class="block-content__images">

				<view class="block-content__images-image" v-for="(img, i) in fromData.images" :key="i">
					<image :src="handler(img)" mode="widthFix" @tap="previewOpen($event, fromData.images)"
						:data-src="img"></image>
				</view>

			</view>

			<view class="block-content__desc">
				<view v-if="userinfo && fromData.contactname != ''">来源：{{fromData.contactname}}</view>
				<view class="tel" @click="telPhone" v-if="userinfo && fromData.contactmobile != ''"><text>联系电话： </text>
					<image src="../../static/tel.png" mode="widthFix"></image> <text
						class="tel-mobile">{{fromData.contactmobile}}</text>
				</view>
				<view v-if="userinfo && fromData.viewcount != ''">浏览：{{fromData.viewcount}}次</view>
			</view>

			<view class="detail-comment">
				<view class="comment-title">
					最新评论
				</view>
				<view class="comment-content" v-for="(item, index) in commentsList" :key="item.id">
					<comments-box :comments="item"></comments-box>
				</view>
				<view class="detail-comment__fabiao" @click="openComment" v-if="commentsList.length == 0">
					快来回复
				</view>
			</view>
		</view>
		<view class="detail-bottom">
			<view class="detail-bottom__input" @click="openComment">
				<text>谈谈你的看法</text>
				<uni-icons type="compose" size="16" color="#f07373"></uni-icons>
			</view>
			<view class="detail-bottom__icons">
				<view class="detail-bottom__icons-box" @click="toNewComments">
					<uni-icons type="chat" size="22" color="#f07373"></uni-icons>
					<uni-badge class="uni-badge-left-margin" :text="commentsList.length" type="error" size="small">
					</uni-badge>
				</view>
				<view class="detail-bottom__icons-box" @click="addCollect">
					<uni-icons :type="fromData.is_like ? 'heart-filled' : 'heart' " size="22" color="#f07373">
					</uni-icons>
				</view>
				<view class="detail-bottom__icons-box" @click="addZan">
					<uni-icons :type="fromData.is_zan ? 'hand-thumbsup-filled' : 'hand-thumbsup'" size="22"
						color="#f07373"></uni-icons>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :maskClick="false">
			<view class="popup-wrap">
				<view class="popup-header">
					<text class="popup-header__item" @click="closeComment">取消</text>
					<text class="popup-header__item" @click="submitComment">发布</text>
				</view>
				<view class="popup-content">
					<textarea class="popup-textarea" v-model="commentsValue" maxlength="200" fixed="true"
						placeholder="请输入评论内容" />
					<view class="popup-count">{{commentsValue.length}}/200</view>
				</view>
			</view>
		</uni-popup>
		<previewImage ref="previewImage" :opacity="0.8" :circular="true" @longPress="longPress"></previewImage>

	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'
	import {
		mapState
	} from 'vuex'
	import {
		substr
	} from '@/utils/index.js'
	export default {
		components: {
			uParse,
			previewImage
		},
		computed: {
			...mapState(['userinfo']),
			...mapState(['systemData'])
		},
		data() {
			return {
				fromData: {},
				noData: '<p style="text-align:center;color:#666;">详情加载中...</p>',
				commentsValue: '', // 输入框的值
				commentsList: [], //评论内容
				replyFormData: {},
				showpage: false
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			// 获取文章内容
			this.getDetail(this.fromData.id)
			// 通过文章id获取评论
			this.getComment(this.fromData.id)
			// 增加浏览数
			this.addViewCount(this.fromData.id)

			// 提示刷新成功
			setTimeout(() => {
				//停止加载
				uni.stopPullDownRefresh();
				//提示刷新成功
				this.$refs.popupsuccess.open()
				//隐藏加载
				uni.hideLoading()
			}, 1000)

		},
		onLoad(query) {
			// this.fromData = JSON.parse(query.params)

			// 获取文章内容
			this.getDetail(query.id)
			// 通过文章id获取评论
			this.getComment(query.id)
			// 增加浏览数
			this.addViewCount(query.id)
		},
		onShow() {

		},

		methods: {
			/**
			 * 拨打电话
			 */
			telPhone() {
				uni.makePhoneCall({
					phoneNumber: this.fromData.contactmobile //仅为示例
				});
			},
			previewOpen(e, imgsarr) {
				var param = e.currentTarget.dataset.src
				this.$refs.previewImage.open(param, imgsarr)
			},
			//长按图片
			longPress(data) {

			},
			handler(img) {
				return img + '-sl100';
			},
			// 获取内容
			getDetail(nid) {
				this.$api.get_list({
					id: nid
				}).then(res => {
					if (res.code === 1) {
						this.fromData = res.data[0]
						// 获取基本参数, 分享用

						var shareImg = '';
						if(this.fromData.images.length > 0){
							shareImg = this.fromData.images[0]
						}
						this.shareWx('',this.fromData.title, shareImg)

						//显示页面
						this.showpage = true
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 打开评论发布窗口
			openComment() {
				// 如果没有登录,显示登录
				if (!this.userinfo) {
					uni.showModal({
						title: '您还没有登录,请先微信登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login?reffer=' + window.location.href
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

							//显示页面
							this.showpage = true
						},
						fail() {
							uni.showToast({
								title: '请重试!',
								icon: 'none'
							})
						}
					})

					return
				}

				this.$refs.popup.open()
			},
			// 关闭评论发布窗口
			closeComment() {
				this.$refs.popup.close()
			},
			// 获取评论列表
			getComment(id) {
				this.$api.get_comment({
					id: id
				}).then(res => {
					if (res.code === 1) {
						this.commentsList = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 添加评论
			submitComment() {
				if (!this.commentsValue) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
					return;
				}

				this.$api.add_comment({
					article_id: this.fromData.id,
					content: this.commentsValue,
					wxuser_id: this.userinfo.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '发布成功',
							icon: 'none'
						})
						// 关闭评论窗口
						this.closeComment()
						this.commentsValue = ''


						// 通过文章id获取评论
						this.getComment(this.fromData.id)
						// 移动位置
						this.toNewComments()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 移动到最新评论
			toNewComments() {
				//目标class
				uni.createSelectorQuery().select('.comment-title').boundingClientRect((data) => {
					//最外层class
					uni.createSelectorQuery().select('.detail').boundingClientRect((res) => {
						uni.pageScrollTo({
							duration: 100, //过渡时间必须为0，否则运行到手机会报错
							scrollTop: data.top - res.top
						})
					}).exec()
				}).exec()
			},
			// 增加浏览数
			addViewCount(id) {
				const _this = this;
				var user_id;
				if (this.userinfo) {
					user_id = this.userinfo.id
				} else {
					user_id = 0;
				}
				this.$api.add_viewcount({
					id: id,
					user_id,
				}).then(res => {
					if (res.code === 1) {
						// 增加浏览数,不做操作
						uni.$emit('submitNotCommetNumChange')
						// 如果浏览者是发布人
						if (user_id) {
							_this.$api.getNotSeeCommentNum({
								user_id: user_id
							}).then(result => {
								// 把登录信息赋值给 vuex 中的 notSeeCommentNum
								_this.$store.dispatch('set_notseecommentnum', result)

								var count = _this.notSeeCommentNum

								if (count > 99) {
									count = '99+';
								}

								// uni.setTabBarBadge({
								// 	index: 3,
								// 	text: String(count)
								// })
							}).catch(err => {
								console.log(err)
							})
						}

					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 点赞
			addZan() {
				// 如果没有登录,显示登录
				if (!this.userinfo) {
					uni.showModal({
						title: '您还没有登录,请先微信登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login?reffer=' + window.location.href
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

							//显示页面
							this.showpage = true
						},
						fail() {
							uni.showToast({
								title: '请重试!',
								icon: 'none'
							})
						}
					})

					return
				}

				this.$api.add_zan({
					article_id: this.fromData.id,
					wxuser_id: this.userinfo.id
				}).then(res => {
					if (res.code === 1) {
						// 增加浏览数,不做操作
						if (res.msg == '点赞成功') {
							uni.showToast({
								title: '点赞成功',
								icon: 'none'
							})
							this.fromData.is_zan = true;
						} else {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							this.fromData.is_zan = false;
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 收藏
			addCollect() {
				// 如果没有登录,显示登录
				if (!this.userinfo) {
					uni.showModal({
						title: '您还没有登录,请先微信登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login?reffer=' + window.location.href
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

							//显示页面
							this.showpage = true
						},
						fail() {
							uni.showToast({
								title: '请重试!',
								icon: 'none'
							})
						}
					})

					return
				}

				this.$api.add_collect({
					article_id: this.fromData.id,
					wxuser_id: this.userinfo.id
				}).then(res => {
					if (res.code === 1) {
						if (res.msg == '收藏成功') {
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
							this.fromData.is_like = true;
						} else {
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							})
							this.fromData.is_like = false;
						}
					}
				}).catch(err => {
					console.log(err)
				})
			}

		}
	}
</script>

<style lang="scss">
	.detail {
		padding: 15px 0;
		padding-bottom: 54px;

		.detail-title {
			padding: 0 15px;
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.detail-header {
			display: flex;
			align-items: center;
			margin-top: 10px;
			padding: 0 15px;

			.detail-header__logo {
				flex-shrink: 0;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail-header__content {
				width: 100%;
				padding-left: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 12px;

				.detail-header__content-title {
					font-size: 14px;
					color: #333;
				}

				.detail-header__content-info {
					color: #999;

					text {
						margin-right: 10px;
					}
				}
			}
		}

		.detail-content {
			margin-top: 20px;
			min-height: 500px;

			.detail-html {
				padding: 15px;
			}

			.detail-comment {
				margin-top: 10px;

				.comment-title {
					padding: 10px 15px;
					font-size: 14px;
					color: #666;
					border-bottom: 1px solid #eee;
				}

				.comment-content {
					padding: 0 15px;
					border-bottom: 1px solid #eee;
				}

				.detail-comment__fabiao {
					text-align: center;
					color: #666;
					padding: 10rpx 0;
					background: #ccc;
				}
			}
		}

		.detail-header__button {
			padding: 0 15px;
			flex-shrink: 0;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			font-size: 12px;
			background-color: $mk-base-color;
			color: #fff;
		}

		.detail-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 44px;
			border-top: 1px solid #f5f5f5;
			background-color: #fff;
			box-sizing: border-box;

			.detail-bottom__input {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 10px;
				padding: 0 12px;
				width: 100%;
				height: 30px;
				border: 1px solid #ddd;
				border-radius: 18px;

				text {
					font-size: 14px;
					color: #999;
					;
				}
			}

			.detail-bottom__icons {
				display: flex;
				flex-shrink: 0;
				padding: 0 10px;

				.detail-bottom__icons-box {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 44px;

					.uni-badge-left-margin {
						position: absolute;
						top: -6px;
						right: 0;
						z-index: 2;
					}

				}
			}
		}

		.popup-wrap {
			background-color: #fff;

			.popup-header {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				color: #666;
				border-bottom: 1px solid #f5f5f5;

				.popup-header__item {
					height: 50px;
					line-height: 50px;
					padding: 0 15px;
				}
			}

			.popup-content {
				width: 100%;
				padding: 15px;
				box-sizing: border-box;

				.popup-textarea {
					width: 100%;
					height: 200px;
				}

				.popup-count {
					display: flex;
					justify-content: flex-end;
					font-size: 12px;
					color: #999;
				}
			}
		}

		.block-content__images {
			padding: 10px;
			display: flex;
			flex-wrap: wrap;
			margin-top: 5px;
			overflow: hidden;

			.block-content__images-image {
				width: 80px;
				font-size: 0;
				margin-right: 2px;
				margin-top: 2px;
				font-size: 0;
				position: relative;

				image {
					width: 80px;
					height: auto;
				}

				.block-content__images-image-more {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, .3);
					z-index: 2;
					color: #fff;
					font-size: 14px;
					display: flex;
					justify-content: center;
					padding: 24%;
					text-align: center;
					line-height: 1.6;
				}
			}
		}

		.block-content__desc {
			padding: 10px;
			font-size: 12px;
			color: gray;

			.tel {
				display: flex;
				align-items: center;

				.tel-mobile {
					font-size: 14px;
					margin-left: 2px;
				}


				image {
					width: 15px;
				}
			}
		}
	}
</style>
